<template>
  <div>
    <div class="title">-精选主题-</div>
      <ul>
        <li
          class="item border-bottom"
          v-for="item of List"
          :key="item.id"
        >   <div class =item-img-wrapper>
              <img class="item-img" :src="item.imgUrl" />
            </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <p class="item-location">{{item.location}}</p>
            <p class="item-people">{{item.people}}</p>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
      return{
      List:[{
          id:"0001",
          imgUrl:"http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
          title:"故宫",
          desc:"传统人都去过，你还等什么",
          location:"坐标地点：北京",
          people:"出发人数：30人"
      },{
          id:"0002",
          imgUrl:"http://img1.qunarzz.com/sight/p0/201405/23/0265195fc4b7913a758674357c3cc8f6.jpg_200x200_b58ea00b.jpg",
          title:"欢乐水魔方",
          desc:"传统建筑结合中国人自己的水上乐园",
          location:"坐标地点：上海",
          people:"出发人数：50人"
      }]
      }
  },
}

</script>
<style lang="stylus" scoped>
  .title
    margin-top:.3rem
    margin-bottom:.4rem
    line-height: .30rem
    height: .1rem
    text-indent: .2rem
    text-align:center
    font-size :.30rem
  .item
    overflow: hidden
    display: flex
    height: 1.9rem
    border:1px solid #eee;
    margin-left:3px;
    margin-right:3px;
    margin-bottom :3px;
    .item-img
      width: 1.7rem
      height: 1.7rem
      margin-top:.1rem
    .item-info
      flex: 1
      padding: .1rem
      min-width: 0
      .item-title
        line-height: .54rem
        font-size: .24rem
      .item-desc
        line-height: .4rem
        font-size: .24rem
        color: #ccc
      .item-button
        line-height: .44rem
        margin-top: .16rem
        background: #ff9300
        padding: 0 .2rem
        border-radius: .06rem
        color: #fff
      .item-location
        line-height: .50rem
        font-size: .24rem
        margin-top:.25rem
        float:left 
      .item-people
        line-height: .50rem
        margin-left:150px
        font-size: .24rem
        margin-top:.25rem

</style>
